<template>
	<view>
		<view class="container">
			<view class="container-title font-AlimamaDongFangDaKaiRegular">
				父母
			</view>
			<view class="container-info">
				<view class="container-info-item" v-for="item in parents">
					<view class="item-top">
						<view class="item-top-left font-AlimamaDongFangDaKaiRegular">
							<image class="item-gender"
							 :src="sheep.$url.static('/assets/img/modal-market-male.png')" 
							 mode="aspectFill" 
							 v-if="item.sex"></image>
							<image class="item-gender" 
							:src="sheep.$url.static('/assets/img/modal-market-female.png')" 
							mode="aspectFill" v-else></image>
							{{item.sex ? '父亲' : '母亲'}}
						</view>
						<view class="item-top-right font-AlimamaDongFangDaKaiRegular">
							{{item.algebra + '代'}}
						</view>
					</view>
					<view class="item-bottom">
						<view class="item-bottom-left">
							<image class="item-bottom-img" 
							:src="sheep.$url.static('/assets/img/modal-market-dad.png')" 
							mode="aspectFill" v-if="item.sex"></image>
							<image class="item-bottom-img" 
							:src="sheep.$url.static('/assets/img/modal-market-mom.png')" 
							mode="aspectFill" v-else></image>
						</view>
						<view class="item-bottom-right">
							<view class="item-score font-AlimamaDongFangDaKaiRegular">
								<image class="score-img" :src="sheep.$url.static('/assets/img/modal-market-lingli.png')" mode="aspectFill"></image>
								{{item.powerValue}}
							</view>
							<view class="item-id font-AlimamaDongFangDaKaiRegular">
								ID:{{item.id}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { computed, reactive, ref } from 'vue';
	const props = defineProps({
		modalType:{
			type: String,
			default:'market-bird'
		},
		detail:{
			type: Object,
			default: {
				"id": 123459,
				"userId": 10086,
				"sex": 0,
				"algebra": 2,
				"powerValue": 44,
				"luckValue": 56,
				"status": 0,
				"rank": 1,
				"basicsMessage": ""
			}
		}
	})

	const parents = computed(()=>{
		if(!props.detail) return
		if(props.detail.basicsMessage){
			return JSON.parse(props.detail.basicsMessage)
		}
		
		return [
				{
					algebra: 1,
					id: 789654,
					powerValue: 123,
				    sex: 0
				},
				{
					algebra: 1,
					id: 689654,
					powerValue: 123,
					sex: 1
				}
			]
	})
</script>

<style lang="scss" scoped>
	.container{
		width: 650rpx;
		height: 356rpx;
		box-sizing: border-box;
		background: #FCFFFA;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		border: 10rpx solid #0E93A3;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 20rpx;
		.container-title{
			margin-bottom: 22rpx;
			white-space: nowrap;
			height: 34rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #017482;
			line-height: 34rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.container-info{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.container-info-item{
				width: 284rpx;
				height: 200rpx;
				box-sizing: border-box;
				flex-shrink: 0;
				flex-grow: 0;
				border-radius: 18rpx;
				background: #F8F5EB;
				padding: 18rpx;
				.item-top{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.item-top-left{
						white-space: nowrap;
						height: 54rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #017482;
						line-height: 54rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
					.item-top-right{
						color: #017482;
						text-align: center;
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
					}
				}
				.item-bottom{
					margin-top: 18rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.item-bottom-right{
						display: flex;
						flex-direction: column;
						align-items: center;
						.item-score{
							color: #017482;
							text-align: center;
							font-size: 24rpx;
							font-style: normal;
							font-weight: 400;
							line-height: 56rpx;
						}
						.item-id{
							color: #017482;
							text-align: center;
							font-size: 22rpx;
							font-style: normal;
							font-weight: 400;
						}
					}
				}
				.item-gender{
					float: left;
					margin-right: 6rpx;
					width: 54rpx;
					height: 54rpx;
				}
				.item-bottom-img{
					margin-right: 9rpx;
					width: 92rpx;
					height: 92rpx;
				}
				.score-img{
					float: left;
					margin-right: 6rpx;
					width: 56rpx;
					height: 56rpx;
				}
			}
		}
	}      
</style>
